<template>
    <div class="register-container">
      <div class="register-box">
        <h2>Sign Up</h2>
        <form @submit.prevent="register">
          <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" v-model="username" placeholder="Enter your username" required />
          </div>
          <div class="input-group">
            <label for="email">Email</label>
            <input type="email" id="email" v-model="email" placeholder="Enter your email" required />
          </div>
          <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" v-model="password" placeholder="Enter your password" required />
          </div>
          <div class="input-group">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="Confirm your password" required />
          </div>
          <button type="submit" class="register-btn">Register</button>
        </form>
        <p class="login-link">Already have an account? <router-link to="/login">Login</router-link></p>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '../stores/userStore';
  import {useServer} from '../components/ts/useServer';
  const username = ref('');
  const email = ref('');
  const password = ref('');
  const confirmPassword = ref('');
  const userStore = useUserStore();
  const router = useRouter();
  const {post} = useServer();
  const register = () => {
    if (!(username.value && email.value && password.value)) {alert('Please fill in all fields');return;}
    if (password.value !== confirmPassword.value) {
      alert('Passwords do not match');
      return;
    }

    post('register',{username:username.value, user_email: email.value, user_password: password.value}).then(res => {
      console.log(res)
      if (res.success) {
        userStore.login(res.userID, res.username);
        router.push('/profile');
      } else {
        alert('Invalid email or password');
      }
    });
  
  };
  </script>
  
  <style scoped>
  /* 基本布局 */
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f4f8;
  }
  
  .register-box {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
  }
  
  h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* 输入框样式 */
  .input-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .input-group label {
    font-size: 14px;
    color: #666;
  }
  
  .input-group input {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
  }
  
  .input-group input:focus {
    border-color: #007bff;
  }
  
  /* 按钮样式 */
  .register-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
  }
  
  .register-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 123, 255, 0.4);
  }
  
  .register-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
  }
  
  /* 登录链接 */
  .login-link {
    margin-top: 20px;
    font-size: 14px;
  }
  
  .login-link a {
    color: #007bff;
    text-decoration: none;
  }
  
  .login-link a:hover {
    text-decoration: underline;
  }
  
  /* 响应式设计 */
  @media (max-width: 480px) {
    .register-box {
      padding: 20px;
    }
  
    h2 {
      font-size: 20px;
    }
  
    .register-btn {
      font-size: 16px;
    }
  }
  </style>
  